<template>
<div class="box">
  <div class="box-left">
    <dv-border-box-8>
      <dv-scroll-ranking-board :config="config2"  style="width:100%;height:50vh" />
    </dv-border-box-8>
    <dv-border-box-13>
      <dv-capsule-chart :config="config2" style="width:100%;height:100%" />
    </dv-border-box-13>
  </div>
  <div class="box-middle">
    <dv-border-box-11 title="人口流动" style="height: 50vh">
      <div style="height: 50vh;display: flex;align-items: center;justify-content: center">
        <dv-flyline-chart-enhanced :config="config3" style="width: 90%;height: 80%" />
      </div>
    </dv-border-box-11>
    <dv-border-box-11 title="资产利用率">
      <div  style="display: flex;align-items: center;justify-content: space-around;height: 100%">
        <dv-water-level-pond :config="config" style="width:150px;height:200px" />
        <dv-active-ring-chart :config="config1" style="width:200px;height:200px" />
        <dv-active-ring-chart :config="config1" style="width:200px;height:200px" />
      </div>
    </dv-border-box-11>
  </div>
  <div class="box-right">
    <dv-border-box-11 title="资产利用率">
      <div style="padding: 60px 20px 0px 20px;box-sizing: border-box">
        <dv-scroll-board :config="config4" style="width:100%;height:260px" />
      </div>
    </dv-border-box-11>

    <dv-border-box-13>
      <dv-charts :option="option" style="width: 100%" />
    </dv-border-box-13>

  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      config:{
        data: [66, 45],
        shape: 'roundRect'
      },
      config1:{
        radius: '40%',
        activeRadius: '45%',
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
        digitalFlopStyle: {
          fontSize: 20
        }
      },
      config2:{
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      config3:{
        points: [
          {
            name: '郑州',
            coordinate: [0.48, 0.35],
            halo: {
              show: true,
            },
            icon: {
              src: 'http://datav.jiaminghi.com/img/flylineChart/mapCenterPoint.png',
              width: 30,
              height: 30
            },
            text: {
              show: false
            }
          },
          {
            name: '新乡',
            coordinate: [0.52, 0.23]
          },
          {
            name: '焦作',
            coordinate: [0.43, 0.29]
          },
          {
            name: '开封',
            coordinate: [0.59, 0.35]
          },
          {
            name: '许昌',
            coordinate: [0.53, 0.47]
          },
          {
            name: '平顶山',
            coordinate: [0.45, 0.54]
          },
          {
            name: '洛阳',
            coordinate: [0.36, 0.38]
          },
          {
            name: '周口',
            coordinate: [0.62, 0.55],
            halo: {
              show: true,
              color: '#8378ea'
            }
          },
          {
            name: '漯河',
            coordinate: [0.56, 0.56]
          },
          {
            name: '南阳',
            coordinate: [0.37, 0.66],
            halo: {
              show: true,
              color: '#37a2da'
            }
          },
          {
            name: '信阳',
            coordinate: [0.55, 0.81]
          },
          {
            name: '驻马店',
            coordinate: [0.55, 0.67]
          },
          {
            name: '济源',
            coordinate: [0.37, 0.29]
          },
          {
            name: '三门峡',
            coordinate: [0.20, 0.36]
          },
          {
            name: '商丘',
            coordinate: [0.76, 0.41]
          },
          {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
          },
          {
            name: '濮阳',
            coordinate: [0.68, 0.17]
          },
          {
            name: '安阳',
            coordinate: [0.59, 0.10]
          }
        ],
        lines: [
          {
            source: '新乡',
            target: '郑州'
          },
          {
            source: '焦作',
            target: '郑州'
          },
          {
            source: '开封',
            target: '郑州'
          },
          {
            source: '周口',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '南阳',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '济源',
            target: '郑州'
          },
          {
            source: '三门峡',
            target: '郑州'
          },
          {
            source: '商丘',
            target: '郑州'
          },
          {
            source: '鹤壁',
            target: '郑州'
          },
          {
            source: '濮阳',
            target: '郑州'
          },
          {
            source: '安阳',
            target: '郑州'
          },
          {
            source: '许昌',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '平顶山',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '洛阳',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '驻马店',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '信阳',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '漯河',
            target: '周口',
            color: '#8378ea'
          }
        ],
        icon: {
          show: true,
          src: 'http://datav.jiaminghi.com/img/flylineChart/mapPoint.png'
        },
        text: {
          show: true,
        },
        k: 0.5,
        bgImgSrc: 'http://datav.jiaminghi.com/img/flylineChart/map.jpg'
      },
      config4:{
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      },
      option:{
        backgroundColor: '#2c343c',

        title: {
          text: 'Customized Pie',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 274, name: '联盟广告'},
              {value: 235, name: '视频广告'},
              {value: 400, name: '搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.box{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  padding: 20px 10px 0 10px;
  box-sizing: border-box;
}
.box .box-middle{
  width: 40vw;
  /*background-color: red;*/
}
.box .box-left,.box .box-right{
  width: 30vw;
  height: 100%;
  /*background-color: rosybrown;*/
}
.box-left,.box-middle,.box-right{
  display: flex;
  flex-direction: column;
}
</style>
